<template>
  <body id="login_body">
<!--    <h2>{{showText}}</h2>-->
<!--    账号：<input type="text" v-model="userData.phone"><br>-->
<!--    密码：<input type="password" v-model="userData.password"><br>-->
<!--    <button @click="Login">登录</button>-->
    <el-form class="login-container" v-if="showLogin" label-position="left" v-loading="loading">
      <h3 class="login_title">系统登陆</h3>
      <el-form-item>
        <el-input type="text" v-model="userData.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password"
                  v-model="userData.password"
                  auto-complete="off"
                  show-password
                  placeholder="密码"></el-input>
      </el-form-item>
        <el-alert v-if="alertMsg" style="margin-bottom: 15px"
          :title="showText"
          type="error">
        </el-alert>
      <el-form-item>
        <el-button type="primary" style="width: 100%;background: #505458;border: none" @click="Login">登录</el-button>
      </el-form-item>
      <span @click="change" class="change">点击注册</span>
    </el-form>
    <el-form class="login-container" v-else label-position="left" v-loading="register_loading">
      <h3 class="login_title">注册用户</h3>
      <el-form-item>
        <el-input type="text" v-model="userData.email" auto-complete="off" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="userData.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%;background: #505458;border: none" @click="register">注册</el-button>
      </el-form-item>
      <span @click="toChange" class="change">点击登录</span>
    </el-form>

    <el-dialog
      title="提示"
      :visible.sync="showMessage"
      :modal-append-to-body='false'
      width="30%">
      <span v-html="web.message"></span>
      <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="showMessage = false">确 定</el-button>
            </span>
    </el-dialog>
  </body>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'Login',
  data () {
    return {
      userData: {
        email: '',
        username: '',
        password: ''
      },
      recordData: {
        ip: '',
        city: '',
        device: '',
        os: ''
      },
      alertMsg: false,
      showText: '',
      loading: false,
      register_loading: false,
      showLogin: true,
      showMessage: false
    }
  },
  mounted () {
    this.getRecordData()
  },
  computed: mapState({
    web: 'web'
  }),
  methods: {
    Login () {
      var _this = this
      this.loading = true
      var userData = {
        username: this.userData.username,
        password: this.userData.password
      }
      var the = this
      let data = JSON.stringify(userData)
      this.$axios.post('/api/user/login',
        this.$qs.stringify({
          userData: data,
          recordData: JSON.stringify(_this.recordData)
        }))
        .then(function (response) {
          the.loading = false
          var data = response.data
          if (data != null) {
            if (data.isSuccess) {
              the.$store.commit('login', data.result)
              the.getUserRole(data.result.userId)
            } else {
              the.userData.password = ''
              the.userData.username = ''
              the.showText = response.data.msg
              the.alertMsg = true
            }
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch(function (error) {
          the.loading = false
          the.$message.error('系统错误，请联系管理员')
          the.userData.password = ''
          the.userData.username = ''
        })
    },
    register () {
      var _this = this
      this.register_loading = true
      this.$axios.post('/api/user/register',
        this.$qs.stringify({
          userData: JSON.stringify({
            email: _this.userData.email,
            password: _this.userData.password
          })
        }))
        .then(function (response) {
          var result = response.data
          _this.register_loading = false
          if (result.isSuccess) {
            _this.$message({
              type: 'success',
              message: '注册成功！请登录！'
            })
          } else {
            _this.$message({
              type: 'error',
              message: result.msg
            })
          }
        })
    },
    change () {
      console.log(this.web)
      this.userData.username = ''
      this.userData.password = ''
      if (this.web.isRegister === 1) {
        this.showLogin = !this.showLogin
      } else {
        this.showMessage = true
      }
    },
    toChange () {
      this.showLogin = !this.showLogin
      this.userData.username = ''
      this.userData.password = ''
    },
    getRecordData () {
      var _this = this
      this.$axios.post('http://ip-api.com/json/?lang=zh-CN')
        .then(function (response) {
          var result = response.data
          _this.recordData.ip = result.query
          _this.recordData.city = result.country + ' ' + result.regionName + result.city
          _this.recordData.device = _this.$Utils.GetCurrentBrowser()
          _this.recordData.os = _this.$Utils.GetOs()
        })
    },
    getUserRole (userId) {
      var _this = this
      this.$axios.post('/api/role/getUserRole',
        this.$qs.stringify({
          userId: userId
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            var result = data.result
            var path = _this.$route.query.redirect
            var admin = false
            for (var i = 0; i < result.length; i++) {
              if (result[i].id === 21 || result[i].id === 22) {
                admin = true
                break
              }
            }
            _this.$router.replace({path: path === '/' || path === undefined ? (admin ? '/manageHome' : '/index') : path})
          }
        })
    }
  }
}
</script>
<style >
  .change {
    cursor: pointer;
  }
  #login_body{
    background: url("../assets/background.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    position: fixed;
  }
  body{
    margin: 0px;
  }
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
</style>
